<template>
	<div style="overflow-x: hidden">
		<topNavigation :linkMsg="linkMsg"></topNavigation>
		<div
			v-if="pageShow"
			style="display: flex; justify-content: center; width: 100vw"
		>
			<div style="width: 70vw">
				<div>
					<el-segmented
						style="font-size: 20px"
						v-model="segmentedValue"
						:options="segmentedOptions"
						block
					/>
				</div>
				<div
					v-if="segmentedValue === '用户管理'"
					style="
						margin-top: 5vh;
						display: flex;
						justify-content: center;
						width: 70vw;
					"
				>
					<div style="width: 65vw; display: flex; user-select: none">
						<div
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
							"
						>
							<el-table
								:data="allUserData"
								stripe
								border
								style="
									width: 20vw;
									height: 50vh;
									overflow-x: hidden;
								"
								highlight-current-row
								@current-change="showCurrentRowUserData"
							>
								<el-table-column
									prop="id"
									label="编号"
									align="center"
								/>
								<el-table-column
									prop="nickname"
									label="昵称"
									align="center"
								/>
								<el-table-column
									prop="notes"
									label="签名"
									align="center"
								/>
							</el-table>
							<div style="margin: 1vh 0">
								<el-pagination
									v-model:current-page="allUserCurrentPage"
									background
									@update:current-page="updateUserCurrentPage"
									:page-size="15"
									layout="prev, pager, next"
									:total="allUserTotal"
								/>
							</div>
						</div>
						<div>
							<el-card
								shadow="hover"
								style="
									width: 45vw;
									position: relative;
									height: 50vh;
								"
								v-if="currentRowUserData !== null"
							>
								<div
									style="
										display: flex;
										align-items: center;
										justify-content: center;
										margin: 1vh 2vw;
									"
								>
									<div>
										<el-image
											:src="currentRowUserData.avatar"
											fit="fill"
											style="
												height: 120px;
												width: 120px;
												border-radius: 50%;
											"
										>
										</el-image>
									</div>
									<div>
										<div style="margin: 2.5vh 0">
											<el-text
												type="primary"
												style="margin: 0 1.5vw"
											>
												<el-icon>
													<User />
												</el-icon>
												{{
													currentRowUserData.nickname
												}}
											</el-text>
										</div>
										<div style="margin: 2.5vh 0">
											<el-text style="margin: 0 1.5vw">
												<el-icon>
													<EditPen />
												</el-icon>
												{{ currentRowUserData.notes }}
											</el-text>
										</div>
									</div>
								</div>
								<div
									v-if="
										currentRowUserData.state === 'fulfilled'
									"
									style="
										width: 100%;
										display: flex;
										justify-content: center;
										margin: 8vh 0;
									"
								>
									<div style="width: 50%">
										<el-alert
											center
											title="用户状态正常"
											type="success"
											show-icon
											:closable="false"
										/>
									</div>
								</div>
								<div
									v-else-if="
										currentRowUserData.state === 'rejected'
									"
									style="
										width: 100%;
										display: flex;
										justify-content: center;
										margin: 8vh 0;
									"
								>
									<div style="width: 50%">
										<el-alert
											center
											title="用户已被封禁"
											type="error"
											show-icon
											:closable="false"
										/>
									</div>
								</div>
								<div
									style="
										display: flex;
										justify-content: center;
										width: 100%;
									"
								>
									<div
										style="
											width: 60%;
											display: flex;
											justify-content: space-between;
											margin-top: 2vh;
										"
									>
										<div>
											<el-button
												type="primary"
												@click="updateAvatar"
											>
												头像存在问题
											</el-button>
										</div>
										<div>
											<el-button
												type="warning"
												@click="updateNickname"
											>
												昵称存在问题
											</el-button>
										</div>
										<div>
											<el-button
												type="danger"
												@click="updateNotes"
											>
												签名存在问题
											</el-button>
										</div>
									</div>
								</div>
							</el-card>
							<el-card
								shadow="hover"
								style="width: 45vw; height: 50vh"
								v-else
							>
								<el-alert
									style="width: 100%; height: 100%"
									title="Info"
									type="info"
									:closable="false"
									center
									description="点击左侧表格行查看用户详细信息"
									show-icon
								/>
							</el-card>
						</div>
					</div>
				</div>
				<div
					v-if="segmentedValue === '博客管理'"
					style="
						margin-top: 5vh;
						display: flex;
						justify-content: center;
						width: 70vw;
					"
				>
					<div style="width: 65vw; display: flex; user-select: none">
						<!-- const allBlogDataTotal = ref(0);
const allBlogData = ref(null); -->
						<div
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
							"
						>
							<el-table
								:data="allBlogData"
								stripe
								border
								style="
									width: 65vw;
									height: 50vh;
									overflow-x: hidden;
								"
								highlight-current-row
								@current-change="showCurrentRowBlogData"
							>
								<el-table-column
									align="center"
									prop="id"
									label="编号"
								/>
								<el-table-column
									align="center"
									prop="uploader"
									label="上传者"
								/>
								<el-table-column
									align="center"
									prop="category"
									label="所属分类"
								/>
								<el-table-column
									align="center"
									prop="title"
									label="博客标题"
								/>
								<el-table-column align="center">
									<template #header>
										<div>
											<el-text type="danger"
												>操作</el-text
											>
										</div>
									</template>
									<template #default="scope">
										<div
											style="
												display: flex;
												justify-content: center;
											"
										>
											<div
												style="
													display: flex;
													justify-content: space-between;
												"
											>
												<el-button
													size="small"
													type="success"
													@click="
														blogPass(
															scope.row,
															scope.$index
														)
													"
													>审核通过</el-button
												>
												<el-button
													@click="
														blogFailed(
															scope.row,
															scope.$index
														)
													"
													size="small"
													type="danger"
													>审核不通过</el-button
												>
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<div style="margin: 1vh 0">
								<el-pagination
									v-model:current-page="allBlogCurrentPage"
									background
									@update:current-page="updateBlogCurrentPage"
									:page-size="15"
									layout="prev, pager, next"
									:total="allBlogDataTotal"
								/>
							</div>
							<div style="margin: 5vh; width: 100%">
								<el-card
									shadow="hover"
									style="min-height: 500px"
									v-if="currentRowBlogData !== null"
								>
									<div
										style="
											width: 100%;
											min-height: 500px;
											display: flex;
											justify-content: center;
											align-items: center;
										"
										v-if="blogLoading"
									>
										<div v-loading="blogLoading"></div>
									</div>
									<div
										v-else
										style="width: 100%; min-height: 500px"
									>
										<el-row style="margin: 2vh 0">
											<el-col
												:span="24"
												style="
													display: flex;
													justify-content: center;
												"
											>
												<div>
													<el-text
														style="font-size: 20px"
													>
														{{
															currentRowBlogData.title
														}}
													</el-text>
												</div>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="24">
												<el-divider>
													<el-icon
														><Comment
													/></el-icon>
												</el-divider>
											</el-col>
										</el-row>
										<div
											v-html="currentRowBlogData.content"
											style="line-height: 30px"
										></div>
									</div>
								</el-card>
								<el-card
									shadow="hover"
									style="min-height: 1000px"
									v-else
								>
									<el-alert
										style="width: 100%; height: 100%"
										title="Info"
										type="info"
										:closable="false"
										center
										description="请点击上方表格栏查看相关博客"
										show-icon
									/>
								</el-card>
							</div>
						</div>
					</div>
				</div>
				<div
					v-if="segmentedValue === '评论管理'"
					style="
						margin-top: 5vh;
						display: flex;
						justify-content: center;
						width: 70vw;
					"
				>
					<div style="width: 65vw; display: flex; user-select: none">
						<div
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
							"
						>
							<div>
								<el-radio-group
									v-model="commentRadio"
									size="large"
								>
									<el-radio-button
										style="border-bottom: none"
										label="留言板评论"
										value="留言板评论"
									/>
									<el-radio-button
										style="border-bottom: none"
										label="用户博客下评论"
										value="用户博客下评论"
									/>
								</el-radio-group>
							</div>
							<el-table
								v-if="commentRadio === '留言板评论'"
								:data="boardCommentData"
								stripe
								border
								style="
									width: 65vw;
									height: 50vh;
									overflow-x: hidden;
								"
								highlight-current-row
							>
								<el-table-column
									align="center"
									prop="id"
									label="编号"
								/>
								<el-table-column
									align="center"
									prop="content"
									label="评论内容"
								/>
								<el-table-column align="center">
									<template #header>
										<div>
											<el-text type="danger"
												>操作</el-text
											>
										</div>
									</template>
									<template #default="scope">
										<div
											style="
												display: flex;
												justify-content: center;
											"
										>
											<div
												style="
													display: flex;
													justify-content: space-between;
												"
											>
												<el-button
													size="small"
													type="success"
													@click="
														commentPass(
															scope.row,
															scope.$index
														)
													"
													>审核通过</el-button
												>
												<el-button
													@click="
														commentFailed(
															scope.row,
															scope.$index
														)
													"
													size="small"
													type="danger"
													>审核不通过</el-button
												>
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<div
								style="margin: 1vh 0"
								v-if="commentRadio === '留言板评论'"
							>
								<el-pagination
									v-model:current-page="
										boardCommentCurrentPage
									"
									background
									@update:current-page="
										updateBoardCommentCurrentPage
									"
									:page-size="15"
									layout="prev, pager, next"
									:total="boardCommentDataTotal"
								/>
							</div>
							<!-- 用户博客下评论 -->
							<!-- const blogCommentCurrentPage = ref(1);
const blogCommentDataTotal = ref(0);
const blogCommentData = ref(null); -->
							<el-table
								v-if="commentRadio === '用户博客下评论'"
								:data="blogCommentData"
								stripe
								border
								style="
									width: 65vw;
									height: 50vh;
									overflow: hidden;
								"
								@current-change="showCurrentRowCommentBlogData"
								highlight-current-row
							>
								<el-table-column
									align="center"
									prop="id"
									label="编号"
								/>
								<el-table-column
									align="center"
									prop="uploader"
									label="上传者"
								/>
								<el-table-column
									align="center"
									prop="category"
									label="所属分类"
								/>
								<el-table-column
									align="center"
									prop="title"
									label="博客标题"
								/>
								<el-table-column align="center">
									<template #header>
										<div>
											<el-text type="danger"
												>博客下评论</el-text
											>
										</div>
									</template>
									<template #default="scope">
										<div>
											<el-dropdown
												trigger="click"
												:hide-on-click="false"
											>
												<el-button
													@click="getBlogComment"
												>
													<el-text type="info">
														展开
														<el-icon>
															<ArrowDown />
														</el-icon>
													</el-text>
												</el-button>
												<template #dropdown>
													<div
														v-if="commentLoading"
														style="
															height: 50vh;
															width: 40vw;
															display: flex;
															justify-content: center;
															align-items: center;
														"
													>
														<div
															v-loading="
																commentLoading
															"
														></div>
													</div>
													<el-dropdown-menu v-else>
														<el-dropdown-item>
															<div
																style="
																	height: 50vh;
																	width: 40vw;
																	display: flex;
																	flex-direction: column;
																	align-items: center;
																"
															>
																<el-table
																	:data="
																		commentData
																	"
																	stripe
																	border
																	style="
																		width: 40vw;
																		height: 45vh;
																		overflow-x: hidden;
																	"
																	highlight-current-row
																	@current-change="
																		showCurrentRowBlogData
																	"
																>
																	<el-table-column
																		align="center"
																		prop="id"
																		label="编号"
																	/>
																	<el-table-column
																		align="center"
																		prop="content"
																		label="评论内容"
																	/>

																	<el-table-column
																		align="center"
																	>
																		<template
																			#header
																		>
																			<div>
																				<el-text
																					type="danger"
																					>操作</el-text
																				>
																			</div>
																		</template>
																		<template
																			#default="scope"
																		>
																			<div
																				style="
																					display: flex;
																					justify-content: center;
																				"
																			>
																				<div
																					style="
																						display: flex;
																						justify-content: space-between;
																						align-items: center;
																					"
																				>
																					<el-button
																						style="
																							margin: 0
																								20px;
																						"
																						size="small"
																						type="success"
																						@click="
																							commentPass(
																								scope.row,
																								scope.$index
																							)
																						"
																						>审核通过</el-button
																					>
																					<el-button
																						style="
																							margin: 0
																								5px;
																						"
																						@click="
																							commentFailed(
																								scope.row,
																								scope.$index
																							)
																						"
																						size="small"
																						type="danger"
																						>审核未过</el-button
																					>
																				</div>
																			</div>
																		</template>
																	</el-table-column>
																</el-table>
																<!-- const currentCommentPage = ref(1);
const commentDataTotal = ref(0);
const commentData = ref(null); -->
																<div
																	style="
																		margin: 1vh
																			0;
																	"
																>
																	<el-pagination
																		v-model:current-page="
																			currentCommentPage
																		"
																		background
																		@update:current-page="
																			updateCommentCurrentPage
																		"
																		:page-size="
																			10
																		"
																		layout="prev, pager, next"
																		:total="
																			commentDataTotal
																		"
																	/>
																</div>
															</div>
														</el-dropdown-item>
													</el-dropdown-menu>
												</template>
											</el-dropdown>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<div
								style="margin: 1vh 0"
								v-if="commentRadio === '用户博客下评论'"
							>
								<el-pagination
									v-model:current-page="
										blogCommentCurrentPage
									"
									background
									@update:current-page="
										updateBlogCommentCurrentPage
									"
									:page-size="15"
									layout="prev, pager, next"
									:total="blogCommentDataTotal"
								/>
							</div>
							<div
								style="margin: 5vh; width: 100%"
								v-if="commentRadio === '用户博客下评论'"
							>
								<el-card
									shadow="hover"
									style="min-height: 500px"
									v-if="currentRowCommentBlogData !== null"
								>
									<div
										style="
											width: 100%;
											min-height: 500px;
											display: flex;
											justify-content: center;
											align-items: center;
										"
										v-if="blogLoading"
									>
										<div v-loading="blogLoading"></div>
									</div>
									<div
										v-else
										style="width: 100%; min-height: 500px"
									>
										<el-row style="margin: 2vh 0">
											<el-col
												:span="24"
												style="
													display: flex;
													justify-content: center;
												"
											>
												<div>
													<el-text
														style="font-size: 20px"
													>
														{{
															currentRowCommentBlogData.title
														}}
													</el-text>
												</div>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="24">
												<el-divider>
													<el-icon
														><Comment
													/></el-icon>
												</el-divider>
											</el-col>
										</el-row>
										<div
											v-html="
												currentRowCommentBlogData.content
											"
											style="line-height: 30px"
										></div>
									</div>
								</el-card>
								<el-card
									shadow="hover"
									style="min-height: 1000px"
									v-else
								>
									<el-alert
										style="width: 100%; height: 100%"
										title="Info"
										type="info"
										:closable="false"
										center
										description="请点击上方表格栏查看相关博客"
										show-icon
									/>
								</el-card>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onBeforeMount, reactive, watch } from 'vue';
import topNavigation from '../components/topNavigation.vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { Comment, User, EditPen, ArrowDown } from '@element-plus/icons-vue';
const router = useRouter();

const pageShow = ref(false);
const segmentedOptions = ['用户管理', '博客管理', '评论管理'];
const segmentedValue = ref('用户管理');

const allUserTotal = ref(0);
const allUserData = ref(null);
const allUserCurrentPage = ref(1);
const currentRowUserData = ref(null);

const allBlogCurrentPage = ref(1);
const allBlogDataTotal = ref(0);
const allBlogData = ref(null);
const currentRowBlogData = ref(null);
const blogLoading = ref(false);

const boardCommentCurrentPage = ref(1);
const boardCommentDataTotal = ref(0);
const boardCommentData = ref(null);
const commentRadio = ref('留言板评论');
const blogCommentCurrentPage = ref(1);
const blogCommentDataTotal = ref(0);
const blogCommentData = ref(null);
const currentRowCommentBlogData = ref(null);
const commentLoading = ref(false);

const currentCommentPage = ref(1);
const commentDataTotal = ref(0);
const commentData = ref(null);

//    pending（进行中）。
// fulfilled（已成功）。
//     rejected（已失败）。

const updateCommentCurrentPage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAppointBlogComment',
			method: 'post',
			data: {
				blogId: currentRowCommentBlogData.value.id,
				limit: 10,
				offset: (pageNum - 1) * 10,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			commentData.value = res.data.data;
			return;
		}
	} catch (error) {
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const getBlogComment = () => {
	commentLoading.value = true;
	setTimeout(async () => {
		if (currentRowCommentBlogData.value !== null) {
			console.log(currentRowCommentBlogData.value);
			try {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/getAppointBlogCommentTotal',
					method: 'post',
					data: {
						blogId: currentRowCommentBlogData.value.id,
					},
				});
				if (res.data.state === 'error') {
					return ElMessage({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					commentDataTotal.value = res.data.data;
				}
			} catch (error) {
				return ElMessage({
					title: 'Error',
					message: '请检查本地网络',
					type: 'error',
				});
			}
			try {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/getAppointBlogComment',
					method: 'post',
					data: {
						blogId: currentRowCommentBlogData.value.id,
						limit: 10,
						offset: 0,
					},
				});
				if (res.data.state === 'error') {
					return ElMessage({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					commentData.value = res.data.data;
					setTimeout(() => {
						commentLoading.value = false;
					}, 500);
					return;
				}
			} catch (error) {
				return ElMessage({
					title: 'Error',
					message: '请检查本地网络',
					type: 'error',
				});
			}
		} else {
			return ElMessage({
				title: 'Warning',
				message: '请先选择表格行，查看下方博客后再进行判断哦',
				type: 'warning',
			});
		}
	}, 500);
};

const showCurrentRowCommentBlogData = (rowData) => {
	blogLoading.value = true;
	currentRowCommentBlogData.value = rowData;
	setTimeout(() => {
		blogLoading.value = false;
	}, 2000);
};

const updateBlogCommentCurrentPage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllPageBlog',
			method: 'post',
			data: {
				limit: 15,
				offset: (pageNum - 1) * 15,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			blogCommentData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

/*
    const currentCommentPage = ref(1);
const commentDataTotal = ref(0);
const commentData = ref(null);
*/

const commentPass = async (commentdata, index) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateCommentState',
			method: 'post',
			data: {
				state: 'fulfilled',
				id: commentdata.id,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			if (commentData.value !== null) {
				commentData.value.splice(index, 1);
				commentDataTotal.value -= 1;
			}
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};
const commentFailed = async (commentdata, index) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateCommentState',
			method: 'post',
			data: {
				state: 'rejected',
				id: commentdata.id,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			console.log(commentData.value);
			commentData.value.splice(index, 1);
			commentDataTotal.value -= 1;
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const updateBoardCommentCurrentPage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getBoardPageComment',
			method: 'post',
			data: {
				limit: 15,
				offset: (pageNum - 1) * 15,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			boardCommentData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const blogPass = async (rowData, index) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateBlogState',
			method: 'post',
			data: {
				state: 'fulfilled',
				id: rowData.id,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allBlogData.value.splice(index, 1);
			allUserTotal.value -= 1;
			currentRowBlogData.value = null;
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};
const blogFailed = async (rowData, index) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateBlogState',
			method: 'post',
			data: {
				state: 'rejected',
				id: rowData.id,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allBlogData.value.splice(index, 1);
			allUserTotal.value -= 1;
			currentRowBlogData.value = null;
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const updateBlogCurrentPage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllPendingBlog',
			method: 'post',
			data: {
				limit: 15,
				offset: (pageNum - 1) * 15,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allBlogData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const showCurrentRowBlogData = (rowData) => {
	blogLoading.value = true;
	currentRowBlogData.value = rowData;
	setTimeout(() => {
		blogLoading.value = false;
	}, 2000);
};

const showCurrentRowUserData = (rowData) => {
	currentRowUserData.value = rowData;
};

const updateAvatar = async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateUserMsg',
			method: 'post',
			data: {
				state: 'updateAvatar',
				username: currentRowUserData.value.username,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};
const updateNickname = async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateUserMsg',
			method: 'post',
			data: {
				state: 'updateNickname',
				username: currentRowUserData.value.username,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};
const updateNotes = async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/updateUserMsg',
			method: 'post',
			data: {
				state: 'updateNotes',
				username: currentRowUserData.value.username,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			return ElMessage({
				title: 'Success',
				message: '操作成功',
				type: 'success',
			});
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

const updateUserCurrentPage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllUserPageMsg',
			method: 'post',
			data: {
				limit: 15,
				offset: (pageNum - 1) * 15,
			},
		});
		if (res.data.state === 'error') {
			return ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			res.data.data.forEach((item) => {
				if (!item.nickname) {
					item.nickname = `新用户${item.id}号`;
				}
				if (!item.notes) {
					item.notes = `暂无签名`;
				}
			});
			allUserData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		return ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
};

onBeforeMount(async () => {
	let username = localStorage.getItem('username');
	//获取用户信息
	// try {
	// 	const res = await axios({
	// 		baseURL: 'http://localhost:5000',
	// 		url: '/getUserMsg',
	// 		method: 'post',
	// 		data: {
	// 			state: 'basedUsername',
	// 			username,
	// 		},
	// 	});
	// 	if (res.data.state === 'error') {
	// 		ElMessage({
	// 			title: 'Error',
	// 			message: '服务器错误',
	// 			type: 'error',
	// 		});
	// 	} else {
	// 		userData.value = res.data.data;
	// 	}
	// } catch (error) {
	// 	console.log(error);
	// 	ElMessage({
	// 		title: 'Error',
	// 		message: '请检查本地网络',
	// 		type: 'error',
	// 	});
	// }

	//const blogCommentCurrentPage = ref(1);
	//const blogCommentDataTotal = ref(0);
	//const blogCommentData = ref(null);

	//获取已通过审核的博客列表长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllBlogTotal',
			method: 'post',
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			blogCommentDataTotal.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//获取已通过审核的博客列表
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllPageBlog',
			method: 'post',
			data: {
				limit: 15,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			blogCommentData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//留言板评论的分页查询
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getBoardPageComment',
			method: 'post',
			data: {
				limit: 15,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			boardCommentData.value = res.data.data;
			console.log(boardCommentData.value);
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//获取留言板评论列表长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getBoardCommentTotal',
			method: 'post',
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			boardCommentDataTotal.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//获取所有审核进行中的博客
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllPendingBlog',
			method: 'post',
			data: {
				limit: 15,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allBlogData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//获取所有审核进行中的博客长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllPendingBlogTotal',
			method: 'post',
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allBlogDataTotal.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//获取所有用户列表长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllUserLength',
			method: 'post',
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			allUserTotal.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	//分页查询用户信息
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getAllUserPageMsg',
			method: 'post',
			data: {
				limit: 15,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElMessage({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			res.data.data.forEach((item) => {
				if (!item.nickname) {
					item.nickname = `新用户${item.id}号`;
				}
				if (!item.notes) {
					item.notes = `暂无签名`;
				}
			});
			allUserData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElMessage({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	pageShow.value = true;
});

const linkMsg = reactive([
	{
		linkName: '文章',
		linkMethod: () => {
			router.push('/article');
		},
	},
	{
		linkName: '发现',
		linkMethod: () => {
			router.push('/discover');
		},
	},
	{
		linkName: '留言板',
		linkMethod: () => {
			router.push('/board');
		},
	},
]);
</script>

<style></style>
